import React, {useState} from "react";
import {createStyles} from "antd-style";
import {Layout, Menu, MenuProps} from "antd";
import {FileImageOutlined, UserOutlined} from "@ant-design/icons";
import userApi from "@/api/UserApi";
import "@/Animation.css"
import UserLoginModal from "@/components/UserLoginModal.tsx";
import {Outlet, useNavigate} from "react-router-dom";
import {useUserInfoStore} from "@/store/BaseStore.ts";

const useStyle = createStyles(({css, token}) => {
    return {
        container: css`
            
        `,
        siderMenu: css`
            background-color: transparent;
            border: none;
        `,
        siderAvatar: css`
            font-size: 30px;
            line-height: 80px;
            white-space: nowrap;
            display: flex;
            overflow: hidden;
            
            .nick-name {
                width: 100px;
                p {
                    width: fit-content;
                    animation-name: text-scroll;
                    animation-fill-mode: forwards;
                    animation-iteration-count: infinite;
                    animation-timing-function: ease-in-out;
                    animation-direction: alternate;
                    animation-duration: 5s;
                    animation-delay: .5s;
                    animation-play-state: running;
                    line-height: 80px;
                    vertical-align: center;
                    :hover {
                        animation-play-state: paused;
                    }
                }
            }
            img {
                width: 80px;
                height: 100%;
                margin-right: 5px;
                z-index: 1;
            }
        `,
    }
})

type MenuItem = Required<MenuProps>['items'][number];



const AdminPage: React.FC = () => {
    const [collapsed, setCollapsed] = useState(true)
    const styles = useStyle().styles;
    const userInfoDto = useUserInfoStore(state => state.userInfoDto)
    const [loginFormOpen, setLoginFormOpen] = useState(false)
    const navigate = useNavigate();
    const getItem = (
        label: React.ReactNode,
        key: number,
        icon?: React.ReactNode,
        onClick?: () => void
    ): MenuItem => {
        return {
            key,
            icon,
            label,
            onClick
        } as MenuItem;
    }

    const items: MenuItem[] = [
        getItem('用户管理',
            1,
            <UserOutlined/>,
            () => {
                navigate('./user')
            }
        ),
        getItem('素材管理',
            2,
            <FileImageOutlined/>,
            () => {
                navigate('./obj')
            }
        ),
        getItem('项目管理',
            3,
            <FileImageOutlined/>,
            () => {
                navigate('./poj')
            }
        ),
        getItem('返回主页',
            100,
            <FileImageOutlined/>,
            () => {
                navigate('/context')
            }
        ),
    ];

    return (
        <div className={styles.container}>
            <Layout style={{minHeight: '100vh', zIndex: -1}}>
                <Layout.Sider collapsible
                              collapsed={collapsed}
                              onMouseOver={() => setCollapsed(false)}
                              onMouseLeave={() => setCollapsed(true)}
                              trigger={null}
                >
                    <div className={styles.siderAvatar}
                         onClick={() => {
                             setLoginFormOpen(true)
                         }}
                    >
                        <img src={userApi.getAvatarLink()} alt="头像"/>
                        <div className="nick-name">
                            <p>{userInfoDto.nickName}</p>
                        </div>
                    </div>
                    <Menu items={items}
                          mode='inline'
                          className={styles.siderMenu}
                    />
                </Layout.Sider>
                <Layout>
                    <Layout.Header>
                        <h1>
                            Web VR Home Tour 管理员页面
                        </h1>
                    </Layout.Header>
                    <Layout.Content>
                        <Outlet/>
                    </Layout.Content>
                </Layout>
            </Layout>
            <UserLoginModal open={loginFormOpen} setOpen={setLoginFormOpen}/>
        </div>
    )
}
export default AdminPage